<template>
    <div class="tabmenu">
      <el-tabs v-model="editableTabsValue" type="card" closable @tab-remove="removeTab" @tab-click="clickTab">
        <el-tab-pane
          v-for="(item, index) in editableTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
    </div>
</template>


<script>
export default {
  data() {
    return {

    }
  },

  computed: {
    editableTabs: {
      get() {
        return this.$store.state.menus.editableTabs;
      },
      set(val) {
        this.$store.state.menus.editableTabs = val;
      }
    },
    editableTabsValue: {
      get() {
        return this.$store.state.menus.editableTabsValue;
      },
      set(val) {
        this.$store.state.menus.editableTabsValue = val;
      }
    }
  },

  methods: {
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;

      if (targetName === 'Index') {
        this.$message({
          message: '你关不掉的!',
          type: 'warning',
          center: true
        });
        return;
      }

      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }

      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);//筛选

      this.$router.push({name: activeName});  // 保证在删除标签页的时候将当前路由地址替换掉。
    },


    // 改变标签页的同时变更路由
    clickTab (target) {
      console.log("target路由名字改变：" +  target.name + " 路由的路径：" + target.path)
      this.$router.push({name: target.name})
      // this.$router.push({path: target.path})
      console.log(this.editableTabs);
    }
  }
}
</script>




<style>

</style>
